<template>
  <div class="app-container">
    <wise-crud ref="wise-crud" :urls="urls" :fields="fields" :handle="handle" :filters="filters">
      <template v-slot:handle="slotProps">
        <el-button v-if="slotProps.row.showStates === 0" type="primary" size="small" round
          @click.native.prevent="startHandle(slotProps.row)">大屏展示</el-button>
        <el-button v-if="slotProps.row.showStates === 1" type="primary" size="small" round
          @click.native.prevent="finishHandle(slotProps.row)">取消展示</el-button>
      </template>
    </wise-crud>
  </div>
</template>
<script>
  import WiseCrud from '@/components/Crud/wiseCrud'
  import {
    postHandle
  } from '@/api'
  export default {
    name: 'GatewayManage',
    components: {
      WiseCrud
    },
    data() {
      return {
        urls: {
          list: '/api/v1/welder-sbtx-second/gateway-comb/list',
          add: '/api/v1/welder-sbtx-second/gateway-comb/create',
          show: '/api/v1/welder-sbtx-second/gateway-comb/show/',
          update: '/api/v1/welder-sbtx-second/gateway-comb/update/',
          delete: '/api/v1/welder-sbtx-second/gateway-comb/remove/'
        },
        gatcardType: [{
          name: '123',
          value: 1
        }]
      }
    },   mounted() {
        
    },
    computed: {
      spaceId() {
        return this.$store.getters.entSpaceId
      },
      handle() {
        // if (this.$store.state.user.project) {
        //   return ['add']
        // } else {
        //   return ['add', 'filters']
        // }
        return ['add']
      },
      fields() {
        let arr = [{
          label: '序号',
          type: 'index',
          use: ['table']
        }]
        arr.push({
            label: '网关类型',
            prop: 'type',
            type: 'radio',
            dataDic: 'gatewayType',
            labelWidth: '130px',
            rules: [{
              required: true,
              message: '请选择网关类型',
              trigger: 'change'
            }],
            use: ['table', 'add', 'view', 'edit', 'search']
          }, {
            label: '网关名称',
            prop: 'name',
            type: 'text',
            labelWidth: '130px',
            rules: [{
              required: true,
              message: '请输入网关名称',
              trigger: 'change'
            }],
            placeholder: '请输入网关名称',
            use: ['table', 'add', 'view', 'edit', 'search']
          }, {
            label: '卡号',
            prop: 'cardNum',
            type: 'text',
            labelWidth: '130px',
            rules: [{
              required: true,
              message: '请输入卡号',
              trigger: 'change'
            }],
            placeholder: '请输入卡号',
            use: ['table', 'add', 'view', 'edit', 'search']
          }, {
            label: '网关编号',
            prop: 'gatewayCode',
            type: 'text',
            labelWidth: '130px',
            rules: [{
              required: true,
              message: '请输入网关编号',
              trigger: 'change'
            }],
            placeholder: '请输入网关编号',
            use: ['table',  'view',  'search']
          }, {
            label: '卡号期限',
            prop: 'g4GqTime',
            type: "date",
            format: "YYYY-MM-DD",
          
            labelWidth: '130px',
            rules: [{
              required: true,
              message: '请选择卡号期限',
              trigger: 'change'
            }],
            placeholder: '请选择卡号期限',
            use: ['table','add' ,  'view', , 'edit' ]
          }, {
            label: '网关卡号',
            prop: 'cardType',
            type: 'radio',
            dataDic: 'getCardType',
            labelWidth: '130px',
            rules: [{
              required: true,
              message: '请选择网关类型',
              trigger: 'change'
            }],
            use: ['table', 'add', 'view', 'edit', 'search']
          }, 
          // {
          //   label: '所属项目',
          //   prop: 'projectInfo.name',
          //   type: 'text',
           
          //   labelWidth: '130px',
             
          //   use: ['table',]
          // },

          {
            label: '大屏展示',
            prop: 'manage',
            type: 'render',
            labelWidth: '130px',
            tableRender: (h, row, index) => {
              return h('el-switch', {
                props: {
                  value: row.showStates,
                  activeValue: 1,
                  inactiveValue: 0
                },
                on: {
                  change: (value) => {
                    if (value === 1) {
                      this.startHandle(row)
                    } else {
                      this.finishHandle(row)
                    }
                  }
                }
              })
            },
            viewRender: (h, item, object) => {
              return h('div', object.showStates ? '是' : '否')
            },
            use: ['table', 'view']
          }, {
            prop: 'entSpaceId',
            defaultValue: this.$store.getters.entSpaceId,
            use: ['add', 'edit']
          }
        )
        arr.push({
          label: '操作',
          type: 'handle',
          use: ['table'],
          handle: ['edit', 'view', 'delete'],
          tableWidth: 300
        })
        return arr
      },
      filters() {
        return [{
          field: 'entSpaceId',
          operator: 'EQUALS',
          value: this.$store.getters.entSpaceId
        }]
      }
    },
    methods: {
      startHandle(row) {
        this.$confirm('大屏是否展示?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            row.showStates = 1
            this.updateStatus(row)
            this.$message({
              type: 'success',
              message: '大屏展示成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      },
      finishHandle(row) {
        this.$confirm('是否取消大屏展示?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            row.showStates = 0
            this.updateStatus(row)
            this.$message({
              type: 'success',
              message: '取消展示成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      },
      updateStatus(obj) {
        postHandle(this.urls.update + obj.id, {
          d: {},
          obj
        }).then((response) => {
          this.object = response.result
        })
      }
    }
  }
</script>

<style>
</style>